import React from 'react'
import {
    Form,
    Input,
    Button,
    Tabs,
    Toast,
    Modal,
    Space,
    Divider
} from 'antd-mobile'
import Dl from '../../components/dl'
import http from '../../utils/http'
import { useNavigate } from 'react-router-dom'
function Index() {
    let Navigate = useNavigate()
    let onFinish = async (values) => {
        let res = await http.post('/api/login', values)

        console.log('登录', res);

        let { code, data, message } = res.data

        if (code === 200) {
            localStorage.setItem('token', data.token)
            localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
            Toast.show({
                icon: 'success',
                content: message
            })
            Navigate('/')
        }
        else {
            Toast.show({
                icon: 'fail',
                content: message
            })
        }
    }
    return (
        <div>
            <Tabs>
                <Tabs.Tab title='扫码登录' key='fruits'>
                    菠萝
                </Tabs.Tab>
                <Tabs.Tab title='免密登录' key='vegetables'>
                    西红柿
                </Tabs.Tab>
                <Tabs.Tab title='密码登录' key='animals'>
                    <Form
                        onFinish={onFinish}
                        layout='horizontal'
                        footer={
                            <Dl></Dl>
                        }
                    >
                        <Form.Header>水平布局表单</Form.Header>
                        <Form.Item
                            name='username'
                            label='用户名'
                            rules={[{ required: true, message: '用户名不能为空' }]}
                        >
                            <Input placeholder='请输入用户名' />
                        </Form.Item>
                        <Form.Item
                            name='password'
                            label='密码'
                            rules={[{ required: true, message: '密码不能为空' }]}
                        >
                            <Input placeholder='请输入密码' />
                        </Form.Item>
                    </Form>

                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Index
